<!--
    使用  v-if    指令选择元素是否需要渲染
    语法:     v-if  =  "arg1  === arg2"

    key 属性控制元素是否重用
    语法:     key =   "arg"
-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script src="js/vue.js"></script>
</head>
<style>
    div{
        border:1px dotted #e6e6e6;
        text-align: center;
        padding: 10px;
    }
</style>
<body>

<div id="app1">
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 3">
        3
    </div>
    <div v-else>
        Not A/B/3
    </div>
</div>

<br/>

<div id="app2">
    <div v-if="Math.random() > 0.5">
        Sorry
    </div>
    <div v-else>
        Not sorry
    </div>
</div>

<br/>

<div id="app3">
    <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address">
    </template>
    <button v-on:click="toggle()">重用元素的切换状态</button>
</div>

<br/>

<div id="app4">
    <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username" key="username-input">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" key="email-input">
    </template>
    <button v-on:click="toggle()">不重用元素的切换状态</button>
    <p>label仍然会被重用，因为那没用添加 key 属性</p>
</div>

<script>
    var app1    =   new Vue({
        el:'#app1',
        data:{
            type:'AB3'
        }
    });


    var app2    =   new Vue({
       el:'#app2'
    });


    var app3    =   new Vue({
        el:'#app3',
        data:{
            loginType:'username'
        },
        methods: {
            toggle: function (e) {
                if(this.loginType   === 'username') this.loginType  =   'other';
                else    this.loginType  =   'username';
            }
        }
    });


    var app4    =   new Vue({
        el:'#app4',
        data:{
            loginType:'username'
        },
        methods:{
            toggle:function(e){
                if(this.loginType   === 'username') this.loginType  =   'other';
                else    this.loginType  =   'username';
            }
        }
    });
</script>
</body>
</html>